<div
  class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-background tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-h-56 tw-max-h-56"
>
  <div bitTypography="h6" class="tw-mb-2">
    {{ "passwordChangeProgress" | i18n }}
  </div>

  @switch (currentView()) {
    @case (PasswordChangeViewEnum.EMPTY) {
      <div class="tw-items-start tw-mb-2">
        <span bitTypography="h3">{{ "assignMembersTasksToMonitorProgress" | i18n }}</span>
      </div>

      <div class="tw-items-baseline tw-gap-2">
        <span bitTypography="body2">{{ "onceYouReviewApplications" | i18n }}</span>
      </div>
    }

    @case (PasswordChangeViewEnum.NO_TASKS_ASSIGNED) {
      <div class="tw-items-start tw-mb-2">
        <span bitTypography="h3">{{ "assignMembersTasksToMonitorProgress" | i18n }}</span>
      </div>

      <div class="tw-items-baseline tw-gap-2">
        <span bitTypography="body2">{{
          "countOfAtRiskPasswords" | i18n: atRiskPasswordCount()
        }}</span>
      </div>

      @if (atRiskPasswordCount() > 0) {
        <div class="tw-mt-4">
          <button bitButton buttonType="secondary" type="button" (click)="assignTasks()">
            <i class="bwi bwi-envelope tw-mr-2"></i>
            {{ "assignTasks" | i18n }}
          </button>
        </div>
      }
    }

    @case (PasswordChangeViewEnum.NEW_TASKS_AVAILABLE) {
      <div class="tw-items-start tw-mb-2">
        <span bitTypography="h3">{{ "assignMembersTasksToMonitorProgress" | i18n }}</span>
      </div>

      <div class="tw-items-baseline tw-gap-2">
        <span bitTypography="body2">{{ "newPasswordsAtRisk" | i18n: unassignedCipherIds() }}</span>
      </div>

      <div class="tw-mt-4">
        <button bitButton buttonType="secondary" type="button" (click)="assignTasks()">
          <i class="bwi bwi-envelope tw-mr-2"></i>
          {{ "assignTasks" | i18n }}
        </button>
      </div>
    }

    @case (PasswordChangeViewEnum.PROGRESS) {
      <div class="tw-items-start tw-mb-2">
        <span bitTypography="h3">{{ "percentageCompleted" | i18n: completedTasksPercent() }}</span>
      </div>

      <div class="tw-items-baseline tw-gap-2">
        <span bitTypography="body2">{{
          "securityTasksCompleted" | i18n: completedTasksCount() : tasksCount()
        }}</span>
      </div>

      <div class="tw-mt-4">
        <div class="tw-flex tw-justify-between">
          <div bitTypography="body2">{{ completedTasksCount() }}</div>
          <div bitTypography="body2">{{ tasksCount() }}</div>
        </div>
      </div>
      <bit-progress
        [showText]="false"
        size="small"
        bgColor="primary"
        [barWidth]="completedTasksPercent()"
        [ariaLabel]="'passwordChangeProgressBar' | i18n"
      >
      </bit-progress>
    }
  }
</div>
